<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';

const selectedId = ref('');
let removeListener: (() => void) | undefined;

onMounted(() => {
  if (window.microApp) {
    removeListener = window.microApp.addDataListener((newData) => {
      selectedId.value = newData.selectedId;
    });
  }
});

onBeforeUnmount(() => {
  if (typeof removeListener === 'function') {
    removeListener(); // Clean up the listener
  }
});
</script>

<template>
  <div>User Details for ID: {{ selectedId }}</div>
</template>

<style scoped></style>
